<template>
  <fui-modal :show="visible" :buttons="[]">
    <view class="modal-agreeement">
      <fui-icon class="modal-agreement-close" name="close" color="#B2B2B2" :size="48" @click="cancel"></fui-icon>
      <view class="modal-agreement-header">
        <view class="modal-agreemtn-tab" :class="{'active': index === currentTab}" v-for="(item, index) in tabs" :key="index"  @click="change(index)">{{ item }}</view>
      </view>
      <scroll-view class="modal-agreement-content" scroll-y>
        <agreement-service v-show="currentTab === 0"></agreement-service>
        <agreement-privacy v-show="currentTab === 1"></agreement-privacy>
      </scroll-view>
      <view class="modal-agreement-footer">
        <fui-button class="modal-agreement-button" :text="`同意并提交${isAuthentication ? '认证' : '注册'}`" height="78rpx" radius="39rpx" :margin="['0']" :disabled="isCountDown" @click="confirm">
          <template v-if="isCountDown">
            （<fui-count-down ref="countDownRef" :value="10" @end="onEndCountDown" :isDays='false' :isHours='false' :isMinutes='false' background="var(--fui-color-primary)" borderColor="var(--fui-color-primary)" :size='32' color="#fff"></fui-count-down>s）
          </template>
        </fui-button>
      </view>
    </view>
  </fui-modal>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import AgreementService from '../agreement/service'
import AgreementPrivacy from '../agreement/privacy'

const props = defineProps({
  isAuthentication: {
    type: Boolean,
    default: true
  }
})

const emits = defineEmits(['confirm', 'cancel'])

const tabs = ['服务协议', '隐私政策']
const currentTab = ref(0)
const change = (index) => {
  currentTab.value = index
}

// 倒计时
const countDownRef = ref(null)
const isCountDown = ref(false)
const onEndCountDown = () => {
  isCountDown.value = false
}

const visible = ref(false)
const show = async () => {
  visible.value = true
  isCountDown.value = true
  await nextTick()
  countDownRef.value.resetCountdown()
}
const cancel = () => {
  emits('cancel')
  visible.value = false
}
const confirm = async () => {
  emits('confirm')
  visible.value = false
}

defineExpose({
  show
})
</script>

<style lang="scss">
.modal-agreeement {
  position: relative;
  width: 100%;
  .modal-agreement-close {
    position: absolute;
    z-index: 10;
    top: -8rpx;
    right: 16rpx;
  }
  .modal-agreement-header {
    padding: 16rpx 24rpx 0;
    .modal-agreemtn-tab {
      display: inline-block;
      background-color: #f4f5f7;
      border-radius: 24rpx;
      margin-right: 16rpx;
      padding: 0 32rpx;
      line-height: 48rpx;
      font-size: 24rpx;
      transition: all .3s ease;
      &.active {
        background-color: #dde6ff;
        font-weight: bold !important;
        font-size: 26rpx;
        color: var(--fui-color-primary) !important;
      }
    }
  }
  .modal-agreement-content {
    height: 60vh;
    overflow: auto;
    padding: 16rpx 0;
  }
  .modal-agreement-footer {
    display: flex;
    padding: 32rpx 32rpx 0;
    .modal-agreement-button {
      width: 100%;
    }
  }
}
</style>